<template>
  <div class="disc">
    <music-list :title="title" :bgImg="bgImg" :songs="songs"></music-list>
  </div>
</template>
<script>
import MusicList from 'components/music-list/music-list'
import {mapGetters} from 'vuex'
import {getDiscSongs} from 'api/recommend'
import {ERR_OK} from 'api/config'
import {createDiscSong} from 'common/js/disc'
export default {
  name: 'Disc',
  data () {
    return {
      songs: []
    }
  },
  components: {
    MusicList
  },
  computed: {
    title () {
      return this.disc.dissname
    },
    bgImg () {
      return this.disc.imgurl
    },
    ...mapGetters(['disc'])
  },
  mounted () {
    this._getDiscSongs()
  },
  methods: {
    _getDiscSongs () {
      if (!this.disc.dissid) {
        this.$router.push('/recommend')
        return
      }
      getDiscSongs()
        .then((res) => {
          if (res.code === ERR_OK) {
            this.songs = this._normalizedSongs(res.cdlist[0])
          }
        })
    },
    _normalizedSongs (cdlist) {
      let ret = []
      let img = cdlist.logo
      cdlist.songlist.forEach((item) => {
        ret.push(createDiscSong(item))
      })
      ret.push(img)
      return ret
    }
  }
}
</script>
<style lang="scss" scoped>
.disc{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

</style>
